<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--<link rel="stylesheet" href="../js/dl.js"/>-->
    <link rel="stylesheet" href="../css/lfybase.css"/>
    <script src="../js/wenben.js"></script>
    <script src="../jquery-1.12.4.min.js"></script>
    <!--<link rel="stylesheet" href="../css/lfydenglu.css"/>-->
</head>
<body>
<!--lfy_shortcut开始-->
<div class="lfy_shortcut">
    <div class="w">
        <div class="lfy_short-left">支付宝.爱心画面 </div>
        <div class="lfy_short-right">
            <ul>
                <li><a href="#">您好，请登录</a>&nbsp;&nbsp;<a href="#">免费 注册</a></li>
                <li ><a href="#" id="jiaren">家人</a></li>
                <li class="lfy_fore"><a href="#" id="airen">爱人</a>
                <li><a href="#">宝宝</a></li>
                <li><a href="#">朋友</a></li>
                <li class="lfy_fore">更多故事</li>
                <li class="lfy_fore">客户服务</li>
                <li class="lfy_fore">网站导航</li>
            </ul>
        </div>
    </div>
</div>
<!--<audio autoplay id="audio">
    <source src="../audio/yinyue2.mp3"/>
</audio>
<js>
    var jiaren=document.getElementById("jiaren");
    var airen=document.getElementById("airen");
    var audio = document.getElementsByTagName("audio"); //对象数组的形式
    jiaren.onclick=function(){
        audio[0].pause();
    }
    airen.onclick=function(){
        audio[0].play();
    }
</js>-->
<!--lfy_shortcut结束 -->
<!--大背景图片开始-->
<div class="lfy_img clearfix"  id="lfy_img">
    <h3 class="hq" id="hq">如果支付宝有了这个项目</h3>
    <p class="p1" id="p2">我想说：下辈子还做你的儿女</p>
    <p class="p" id="p3">亲情就在那里等着你去挖掘</p>
</div>
<script>
    var lfy_img=document.getElementById("lfy_img");
    var hq=lfy_img.children[0];
    var p2=lfy_img.children[1];
    var p3=lfy_img.children[2];
    lfy_img.onmouseover=function(){
        hq.style.display="block";
        p2.style.display="block";
        p3.style.display="block";
    }
    lfy_img.onmouseout=function(){
        hq.style.display="none";
        p2.style.display="none";
        p3.style.display="none";
    }

</script>
<!--大的背景图片结束-->
<!--第三部分开始-->
<div class="lfy_center ">
    <div class="left1" id="box">
        <h2>家人</h2>
        <div class="left_one">
            <a href="#"><img src="../images1/jiaren2.jpg"width="200"height="200" alt=""/></a>
        </div>
        <p>带爸妈去一次游玩</p>
    </div>
    <div class="left2">
        <h2>爱人</h2>
        <div class="left_two">
            <a href="#"><img src="../images1/aiqing.jpg"width="200"height="200" alt=""/></a>
        </div>
        <p>给爱人一个亲吻</p>
    </div>
    <div class="left3">
        <h2>子女</h2>
        <div class="left_three">
            <a href="#"><img src="../images1/children.jpg"width="200"height="200" alt=""/></a>
        </div>
        <p>给宝宝一个拥抱</p>
    </div>
    <div class="left4">
        <h2>陌生人</h2>
        <div class="left_four">
            <a href="#"><img src="../images1/moxiao.jpg" width="200"height="200" alt=""/></a>
        </div>
        <p>给他一个微笑</p>
    </div>
    <div class="left5">
        <h2>有没有想过：</h2>
        <br/>
        <br/>
        <p>当你用支付宝来消费的时候，<br/>有没有想起你的父母
        当你出去玩耍时 <br/>有没有想过<br/>其实这个地方
        爸妈也没有来过</p>
        <a href="index.html">点我！永远有惊喜</a>
    </div>
</div>
<!--第三部分结束-->
<!--第四部分开始-->
<!--<div class=" lfy_nav">
    <div class="lfy_nav_top" id="lfy_nav_top">
        <h1>岁月不饶人</h1>
        <p>亲情犹如一江剪不断的春水，流动的是游子心中永远的思念；<br/>
            亲情犹如一丘数不尽的细沙，沉淀的是长年堆积的牵挂；<br/>
            亲情犹如夜空中那颗北斗，指引的是那迷路的羔羊回家的方向。
        </p><br/>
        <p>The family js a constant shear flows, flow of mind wandering forever;<br/>
            love js like a hill endless sand, precipitation js the long-term accumulation of care;<br/>
            family like the night sky the Beidou, guided the lost lamb js the direction to go home.
        </p>

    </div>
    <u></u>
    <div class="lfy_nav_bottom" >
        <div class="lfy_bottom_right">
            <img src="../images1/huijia.jpg" width="800"height="397" />
        </div>

    </div>
</div>
<js>
    var lfy_nav_top=document.getElementById("lfy_nav_top");
    var lfy_nav=lfy_nav_top.parentNode;
    lfy_nav.onmouseover=function(){
        lfy_nav_top.style.display="block";
    }
   /* lfy_nav.onmouseout=function(){
        lfy_nav_top.style.display="none";
    }
*/

</js>

&lt;!&ndash;第四部分结束&ndash;&gt;


&lt;!&ndash;加二开始&ndash;&gt;

<div id="btn1">
    <div class="box" id="screen">
        <ul>
            <li><img src="../images1/liantu1.jpg"width="400" height="210"/></li>
            <li><img src="../images1/liantu2.jpg"width="400" height="210"/></li>
            <li><img src="../images1/liantu4.jpg"width="400" height="210"/></li>
            <li><img src="../images1/liantu5.jpg"width="400" height="210"/></li>
            <li><img src="../images1/liantu7.jpg"width="400" height="210"/></li>
            <li><img src="../images1/liantu3.jpg"width="400" height="210"/></li>
            <li><img src="../images1/lian9.jpg"width="400" height="210"/></li>
            <li><img src="../images1/liantu8.jpg" width="400" height="210" alt=""/></li>
            <li><img src="../images1/liantu12.jpg" width="400" height="210" alt=""/></li>
            <li><img src="../images1/liantu6.jpg"width="400" height="210" alt=""/></li>
            <li><img src="../images1/liantu11.jpg"width="400" height="210" alt=""/></li>
            <li><img src="../images1/liantu10.jpg"width="400" height="210"/></li>
            <li><img src="../images1/peiban.jpg"width="400" height="210"/></li>

        </ul>
    </div>
</div>
<js>
    //获取页面元素
    var screen = document.getElementById("screen");
    var ul = screen.children[0];


    var timer = setInterval(function () {
        //leader = leader +step;
        var leader = ul.offsetLeft;
        var step = -10;
        leader = leader + step;
        //最多跑到假的第一张显示的时候 ，最多就是ul的宽减去一张图的宽度
        if (leader >= -(ul.offsetWidth - ul.children[0].offsetWidth)) {
//        if (leader > -(ul.offsetWidth - ul.children[0].offsetWidth)) {
            //设置ul的left值，让ul运动
            ul.style.left = leader + "px";
        } else {
            ul.style.left = step + "px";
//            ul.style.left = 0 + "px";
        }
        console.log(timer);
    }, 40);
</js>
&lt;!&ndash;加二结束&ndash;&gt;

&lt;!&ndash;第五部分开始&ndash;&gt;
<div class="lfy_foot">
    <div class="lfy_foot_left">
        <h1>是消费还是陪伴父母？？？？？？</h1>
        <h2>是手机重要还是父母？？？？？？</h2>
        <h2 class="wen">是所谓的高端生活重要还是父母？？？？？？</h2>
        <h2 class="ben">你们觉得呢！！！！！！！</h2>
    </div>
    <div class="lfy_foot_right">
        <img class="q1" src="../images1/buy4.jpg" width="200" height="200"/>
        <img class="q2" src="../images1/moshengren.jpg" alt="" width="200" height="200"/>
        <img class="q3" src="../images1/shechi.jpg" alt="" width="200" height="200"/>
        <img class="q4" src="../images1/long.jpg" width="200" height="200" alt=""/>
        <img class="q4" src="../images1/jiaren5.jpg" width="200" height="200" alt=""/>
        <img class="q4" src="../images1/jiaren4.jpg" width="200" height="200" alt=""/>
    </div>
</div>
&lt;!&ndash;第五部分结束&ndash;&gt;
&lt;!&ndash;加一开始&ndash;&gt;
<div class="lfy_apple">
    <input type="button" id="btn" value="添加" style="float:left">
    <div id="add" class="add">
        <div id="title" class="add-title">添加祝愿纸条
        <span>
            <a id="closeBtn" href="javascript:void(0);" class="close-add">关闭</a>
        </span>
        </div>
        <div class="add-input-content">
            <div class="add-input">
                <label>昵称：</label>
                <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="add-input">
            </div>
            <div class="add-input">
                <label>纸条内容：</label>
                <textarea name="" id="txtContent" cols="50" rows="6"></textarea>
            </div>
        </div>
        <div id="loginBtn" class="add-button"><a href="javascript:void(0);" id="add-button-submit">提交</a></div>
    </div>
    <div id="bg" class="add-bg"></div>
    <div id="content" >
    </div>
</div>

<js>
    var messages = [    //数组里面的每一条数据都是一个json对象
        {"id":1,"name":"mahu","content":"今天你拿苹果支付了么","time":"2016-02-17 00:00:00"},
        {"id":2,"name":"haha","content":"今天天气不错，风和日丽的","time":"2016-02-18 12:40:00"},
        {"id":3,"name":"jjjj","content":"常要说的事儿是乐生于苦","time":"2016-03-18 12:40:00"},
        {"id":4,"name":"9.8的妹纸","content":"把朋友家厕所拉堵了 不敢出去 掏了半小时了都","time":"2016-03-18 12:40:00"},


    ];
    // 2. 先获得要操作的对象
    var content = document.getElementById("content");//获取存储纸条的div
    var btn = document.getElementById("btn");//拿到按钮
    var add =document.getElementById("add"); //获得弹出框的那个盒子div
    var bg = document.getElementById("bg"); // 获得背景透明背景的那个DIV
    var closeBtn = document.getElementById("closeBtn");//右上角的关闭按钮
    var btnSubmit = document.getElementById("add-button-submit");//获得提交按钮
    var  userName = document.getElementById("username");// 获得输入框
    var txtContent = document.getElementById("txtContent"); // 获得文本框

    // 当单击按钮的时候，弹出对话框(输入框，一个是背景盒子)
    btn.onclick = function (){
        add.style.display = "block";
        bg.style.display = "block";
    }

    // 当单击关闭按钮的时候，要关闭当前的输入框和背景盒子
    closeBtn.onclick = function (){
        hide(); // 将当前的弹出框和背景透明盒子隐藏起来
    }

    /**
     * 隐藏两个层的函数
     */
    function hide(){
        add.style.display = "none";
        bg.style.display = "none";
    }

    // 给提交按钮注册事件
    var num = messages.length+1;
    btnSubmit.onclick = function (){
        // 首先获得输入框的内容
        var date = new Date();
        var mm ={}; // 创建一个空对象
        mm.name= userName.value; // 将获取的昵称存到对象的name属性中
        mm.content = txtContent.value; // 将获取的用户输入的值存到对象的content属性中
        mm.time = getDate(date);
        mm.id= num++;
        // 动态的生成纸条
        createBox(content,mm);
        hide();
    }

    // 3. 动态的创建元素  根据数组里面的数据，生成原始的纸条
    var zIndex = 0;
    for(var i=0;i<messages.length;i++){
        var mes = messages[i];
        createBox(content,mes);// 调用创建小纸条的函数,传父盒子content，对象
    }

</js>

&lt;!&ndash;加一结束 &ndash;&gt;-->
<!--第六部分开始-->
<div class=" lfy_footer-bottom">
    <div class="footer-bottom-links">
        <a href="#">关于我们</a>|
        <a href="#">联系我们</a>|
        <a href="#">联系客服</a>|
        <a href="#">商家入驻</a>|
        <a href="#">营销中心</a>|
        <a href="#">手机支付</a>|
        <a href="#">友情链接</a>|
        <a href="#">销售联盟</a>|
        <a href="#">风险监测</a>|
        <a href="#">English Site</a>|
        <a href="#">Coutac Us</a>
    </div>
    <div class="footer-bottom-copyright">
        <p class="q"><a href="#">京公网安备 11000002000088号</a>&nbsp;&nbsp;|&nbsp;&nbsp;京ICP证070359号&nbsp;&nbsp;|&nbsp;&nbsp;互联网药品信息服务资格证编号(京)-经营性-2014-0008&nbsp;&nbsp;|&nbsp;&nbsp;新出发京零 字第大120007号</p>
        <p class="q">互联网出版许可证编号新出网证(京)字150号&nbsp;&nbsp;|&nbsp;&nbsp;出版物经营许可证&nbsp;&nbsp;|&nbsp;&nbsp;网络文化经营许可证京网文[2014]2148-348号&nbsp;&nbsp;|&nbsp;&nbsp;违法和不良信息举报电话：4006561155</p>
        <p class="q">Copyright ? 2004 - 2016  京东JD.com 版权所有&nbsp;&nbsp;|&nbsp;&nbsp;消费者维权热线：4006067733</p>
    </div>
</div>
<!--第六部分结束-->

</body>
</html>